<template>
    <div class="common-layout">
        <el-container class="container">
            <el-header class="header">
                <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 32 32" class="svgtubiao">
                    <g fill="none">
                        <path fill="#F8312F"
                            d="M5 3.5a1.5 1.5 0 0 1-1 1.415V12l2.16 5.487L4 23c-1.1 0-2-.9-2-1.998v-7.004a2 2 0 0 1 1-1.728V4.915A1.5 1.5 0 1 1 5 3.5Zm25.05.05c0 .681-.44 1.26-1.05 1.468V12.2c.597.347 1 .994 1 1.73v7.01c0 1.1-.9 2-2 2l-2.94-5.68L28 11.93V5.018a1.55 1.55 0 1 1 2.05-1.468Z">
                        </path>
                        <path fill="#FFB02E"
                            d="M11 4.5A1.5 1.5 0 0 1 12.5 3h7a1.5 1.5 0 0 1 .43 2.938c-.277.082-.57.104-.847.186l-3.053.904l-3.12-.908c-.272-.08-.56-.1-.832-.18A1.5 1.5 0 0 1 11 4.5Z">
                        </path>
                        <path fill="#CDC4D6"
                            d="M22.05 30H9.95C6.66 30 4 27.34 4 24.05V12.03C4 8.7 6.7 6 10.03 6h11.95C25.3 6 28 8.7 28 12.03v12.03c0 3.28-2.66 5.94-5.95 5.94Z">
                        </path>
                        <path fill="#212121"
                            d="M9.247 18.5h13.506c2.33 0 4.247-1.919 4.247-4.25A4.257 4.257 0 0 0 22.753 10H9.247A4.257 4.257 0 0 0 5 14.25a4.257 4.257 0 0 0 4.247 4.25Zm4.225 7.5h5.056C19.34 26 20 25.326 20 24.5s-.66-1.5-1.472-1.5h-5.056C12.66 23 12 23.674 12 24.5s.66 1.5 1.472 1.5Z">
                        </path>
                        <path fill="#00A6ED"
                            d="M10.25 12C9.56 12 9 12.56 9 13.25v2.5a1.25 1.25 0 1 0 2.5 0v-2.5c0-.69-.56-1.25-1.25-1.25Zm11.5 0c-.69 0-1.25.56-1.25 1.25v2.5a1.25 1.25 0 1 0 2.5 0v-2.5c0-.69-.56-1.25-1.25-1.25Z">
                        </path>
                    </g>
                </svg>
                <el-breadcrumb separator="">
                    <el-breadcrumb-item :to="{ path: './boke' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item :to="{ path: './boke1' }">博客1</el-breadcrumb-item>
                    <el-breadcrumb-item :to="{ path: './boke2' }">今日头条</el-breadcrumb-item>
                </el-breadcrumb>
            </el-header>
            <el-main class="main">
                <div class="divbox">

                </div>
                <router-view>
                </router-view>
            </el-main>
        </el-container>
    </div>
</template>

<script setup>
const tableData = [
    {
        date: '2016-05-03',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-02',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-04',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-01',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
]
</script>

<style lang="scss" scoped>
.common-layout {
    height: 100%;
}

.container {
    height: 100%
}

.header {
    // background-color: #4a7f66
    background-image: linear-gradient(to bottom, #bdc3c7, #828d99);
    opacity: 1;
    z-index: 1;
    border-bottom: 1px solid #82827a;

}

.main {
    // background-color: #000;
    --el-main-padding: 0px !important;
    background-image: linear-gradient(to bottom, #bdc3c7, #2c3e50);
}

.divbox {
    // padding-bottom: 10px;
    // padding-left: 10px;
    width: 100%;
    height: 100%;
    // background-image: url("https://images.pexels.com/photos/14437806/pexels-photo-14437806.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2");
    z-index: -1;
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
    // opacity: 0.7;
    // background-image: linear-gradient(to bottom, #7ec6bc, #ebe717);
}

.el-breadcrumb {
    font-size: 20px;
    line-height: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px;
}

.svgtubiao {
    position: absolute;
    top: 1%;
    left: 2%;
}
</style>